<!--
 * @Author: 大司马
 * @Date: 2020-12-29 17:42:55
 * @LastEditors: 大司马
 * @LastEditTime: 2021-02-04 13:50:47
 * @FilePath: \open-platform-ui\platform-pc-console\src\view\newsletter-email\index.vue
 -->
<template>
  <div class="letter-email">
    <div v-show="detailsModal == false">
      <Card class="page" dis-hover>
        <div
          style="display: flex; align-items: center"
          v-if="
            hasOneOf(
              ['common:notice-customer:read-customer'],
              $store.state.user.access
            )
          "
        >
          <div v-if="!onlyNoReady" class="mb-10">
            (共{{ readTotal || 0 }}封，其中{{ readNo || 0 }}封未读，
            <span
              style="color: #0084ff; cursor: pointer"
              @click="changeStatus(2)"
              >仅查看未读消息</span
            >)
          </div>
          <div v-if="onlyNoReady" class="mb-10">
            (未读{{ readNo || 0 }}封，
            <span
              style="color: #0084ff; cursor: pointer"
              @click="changeStatus(0)"
              >查看全部消息</span
            >)
          </div>
        </div>
        <div class="flex justify-between">
          <div class="flex">
            <Button
              class="mr-8 letter-btn-del"
              :class="{ colorBlue: selectLists.length }"
              v-if="
                buttStatus &&
                hasOneOf(
                  ['platform_message_center_notice_delete'],
                  $store.state.user.access
                )
              "
              :disabled="!selectLists.length"
              @click="del"
              >删除</Button
            >
            <Button
              v-if="
                hasOneOf(
                  ['platform_message_center_notice_read'],
                  $store.state.user.access
                )
              "
              :class="{ colorBlue: selectLists.length }"
              class="mr-8 letter-btn-read"
              :disabled="!selectLists.length"
              @click="markAlready"
              >标记为已读</Button
            >
            <Button
              v-if="
                hasOneOf(
                  ['platform_message_center_notice_read'],
                  $store.state.user.access
                )
              "
              class="mr-20 letter-btn-all"
              @click="markAlreadyAll"
              >全部标记为已读</Button
            >
            <Radio-group
              v-if="
                hasOneOf(
                  ['platform_message_center_notice_type'],
                  $store.state.user.access
                )
              "
              v-model="msgStatus"
              style="min-width: 540px"
              type="button"
              @on-change="handleFilterKw"
            >
              <Radio :label="0">全部</Radio>
              <Radio :label="1">系统公告</Radio>
              <Radio :label="5">工单消息</Radio>
              <Radio :label="6">预警消息</Radio>
              <!-- <Radio :label="3">订单通知</Radio>
              <Radio :label="4">财务消息</Radio>-->
              <Radio :label="10">其他消息</Radio>
            </Radio-group>
          </div>
          <div
            class="flex align-center"
            v-if="
              hasOneOf(
                ['common:notice-content:view-content'],
                $store.state.user.access
              )
            "
          >
            <Input
              type="text"
              class="mr-6"
              style="width: 200px"
              v-model="info.title"
              placeholder="请输入名称"
              search
              enter-button
              @on-search="doSearch"
            />
          </div>
        </div>
      </Card>
      <crudTable
        :isExport="false"
        ref="crudTable"
        :border="true"
        :columns="columns"
        :url="`/content/view`"
        :isSearch="false"
        platType="MSGS"
        :addInfo="addInfo"
        :visible="true"
        :noRequestPage="true"
        @setSelects="setSelects"
        :setEmpty="true"
        minHeight="calc(100vh - 345px)"
      ></crudTable>
      <!-- <Table
          @on-selection-change="checkItem"
          :columns="columns"
          :data="tabData"
          :loading="loading"
        ></Table> -->
    </div>
    <div v-show="detailsModal == true">
      <detailModal ref="delModal" :sign="detailsModal" @goBack="goBack" />
    </div>
  </div>
</template>

<script>
import { hasOneOf, hasShow } from "@/libs/tools";
import crudTable from "_c/crud-Table/index.vue";
import {
  getPages,
  delByIds,
  markSingle,
  markAll,
  getLetterType1,
  getLetterType2,
} from "@/api/mq-service";
import detailModal from "./detailModal";

import { getUnreadNums } from "@/libs/login";
export default {
  components: {
    detailModal,
    crudTable,
  },
  data() {
    return {
      hasOneOf,
      hasShow,
      loading: false,
      buttStatus: true,
      flag: false, // 标识使用的是哪一个接口 false init() true handleFilterKw()
      detailsModal: false, // 详情页
      messageTypeList1: [],
      messageTypeList2: [
        { label: 1, value: "系统公告" },
        { label: 2, value: "审核通知" },
        { label: 3, value: "订单通知" },
        { label: 4, value: "财务消息" },
        { label: 5, value: "工单消息" },
        { label: 6, value: "系统消息" },
      ],
      // 表头配置
      columns: [
        {
          title: "#",
          type: "selection",
          align: "center",
          width: 70,
        },
        {
          title: "标题",
          maxWidth: 280,
          ellipsis: true,
          renderHeader: (h) => {
            return h("div", [
              h(
                "strong",
                {
                  style: {
                    marginLeft: "24px",
                  },
                },
                "标题"
              ),
            ]);
          },
          render: (h, params) => {
            return h(
              "div",
              {
                class: {
                  flex: true,
                  "algin-center": true,
                },
              },
              [
                h("i", {
                  class: {
                    iconfont: true,
                    "icon-zhanneixindakaibeifen": params.row.viewType == 1,
                    "icon-zhanneixinbeifen2":
                      params.row.viewType == 2 || params.row.viewType == null,
                  },
                  style: {
                    fontSize: "14px",
                    cursor: "pointer",
                    color: params.row.viewType == 1 ? "#999" : "#0084FF",
                    marginRight: "7px",
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.detailsModal = true;
                      this.$refs.delModal.list = params.row;
                    },
                  },
                }),
                h(
                  "span",
                  {
                    style: {
                      cursor: "pointer",
                      color: params.row.viewType == 1 ? "#999" : "#0084FF",
                    },
                    class: {
                      tb: true,
                      "letter-bot-line": true,
                    },
                    on: {
                      click: () => {
                        this.detailsModal = true;
                        this.$refs.delModal.list = params.row;
                      },
                    },
                  },
                  params.row.title
                ),
              ]
            );
          },
        },
        {
          title: "消息内容",
          ellipsis: true,
          render: (h, params) => [
            h(
              "span",
              {
                props: {
                  type: "primary",
                  size: "small",
                  value: params.row.name,
                },
                style: {
                  cursor: "pointer",
                  color: params.row.viewType == 1 ? "#999" : "#0084FF",
                },
                class: {
                  tb: true,
                  "letter-bot-line": true,
                },
                on: {
                  click: () => {
                    this.detailsModal = true;
                    this.$refs.delModal.list = params.row;
                  },
                },
              },
              params.row.noticeContents
            ),
          ],
        },
        {
          title: "时间",
          width: 240,
          render: (h, params) => [
            h(
              "span",
              {
                style: {
                  cursor: "pointer",
                  color: params.row.viewType == 1 ? "#999" : "#333",
                },
              },
              params.row.dataUpdateTime
            ),
          ],
        },
        {
          title: "消息类型",
          width: 160,
          render: (h, params) => [
            h(
              "span",
              {
                style: {
                  cursor: "pointer",
                  color: params.row.viewType == 1 ? "#999" : "#333",
                },
              },
              this.messageTypeList2.find(
                (v) => v.value === params.row.messageType
              )?.name
            ),
          ],
        },
      ],
      selectLists: [], // 表单选中项
      showAllFlag: false,
      searchFilter: "",
      readNo: "",
      readTotal: "",
      onlyNoReady: false, // 全部和未读状态转换
      msgStatus: 0, // 当前类型
      addInfo: {
        sort: "data_create_time",
        order: "DESC",
        receiveId: this.$store.state.user.userId,
        viewType: 0, // 已读 未读
      },
      info: {},
    };
  },
  mounted() {
    this.getReadStatus();
    // 获取枚举
    this.$getEnumerations([
      { type: "msgs", code: 405, name: "messageTypeList1" },
      { type: "msgs", code: 13, name: "messageTypeList2" },
    ]).then((res) => {
      this.messageTypeList1 = [
        { label: "0", name: "全部" },
        ...res.messageTypeList1,
      ];
      this.messageTypeList2 = res.messageTypeList2;
    });
    this.$refs.crudTable.init();
  },
  methods: {
    // 搜索
    doSearch() {
      this.info?.title?.length
        ? ""
        : (delete this.info?.title, delete this.addInfo?.title);
      this.addInfo = Object.assign(this.addInfo, this.info);
      this.$refs.crudTable.init();
    },
    // 设置选中数据
    setSelects(val) {
      this.selectLists = val;
    },
    // 改变状态 显示仅查看内容
    changeStatus(e) {
      this.onlyNoReady = !this.onlyNoReady;
      this.addInfo.viewType = this.onlyNoReady == false ? "0" : "2";
      this.$refs.crudTable.init();
    },
    // 过滤功能 类型查询
    handleFilterKw(e) {
      e == 1 ? (this.buttStatus = false) : (this.buttStatus = true); // e==1 时为系统公告关闭删除按钮
      e != 0
        ? (this.addInfo.messageType = e)
        : delete this.addInfo?.messageType;
      this.$refs.crudTable.init();
    },
    // 获取信息条数
    getReadStatus() {
      // 获取站内信未读信息条数
      getUnreadNums().then((num) => (this.readNo = num || 0));
      // 获取站内信全部条数
      getUnreadNums(0).then((num) => (this.readTotal = num || 0));
    },
    // 单个标记
    async markAlready() {
      let that = this;
      let id = this.selectLists.map(function (item) {
        return { id: item.id, receiveId: that.$store.state.user.userId };
      });

      let arr = this.selectLists.map((item) => {
        return item.id;
      });
      // if (!this.showAllFlag) {
      // 单个标记
      await markSingle(
        arr
        // receiveId:this.$store.state.user.userId,
      )
        .then((d) => {
          // console.log('单个',d.data);
          this.$Message.success("标记选中行已读操作成功!");
          this.$refs.crudTable.init();

          // 刷新条数
          this.getReadStatus();
        })
        .catch((e) => {
          let ev = e.msg ? e.msg : e.message;
          this.$Message.error(ev);
        });
      // }
    },

    // 全部标记已读
    markAlreadyAll() {
      // 标记全部
      markAll({
        receiveId: this.$store.state.user.userId,
      })
        .then((d) => {
          // console.log('全部',d.data);
          this.$Message.success("标记全部已读操作成功!");
          this.$refs.crudTable.init();

          // 刷新条数
          this.getReadStatus();
        })
        .catch((e) => {
          let ev = e.msg ? e.msg : e.message;
          this.$Message.error(ev);
        });
    },
    // 删除
    del() {
      let deleCongif = true;
      let id = this.selectLists.map(function (item) {
        if (item.messageType == 1) {
          deleCongif = false;
        } // 判断是否含有系统公告
        return item.id;
      });
      if (deleCongif) {
        this.$Modal.confirm({
          title: "删除",
          content: "确认删除吗?",
          onOk: () => {
            delByIds(id)
              .then((d) => {
                this.$Message.success("删除成功!");
                this.$refs.crudTable.init();
              })
              .catch((e) => {
                let ev = e.msg ? e.msg : e.message;
                this.$Message.error(ev);
              });
          },
          onCancel: () => {},
        });
      } else {
        this.$Message["error"]({
          background: true,
          content: "系统公告无法删除",
        });
      }
    },
    // 选中
    checkItem(i) {
      this.selectLists = i; // 选中项
      // arr = ;
      // this.showAllFlag = this.selectLists.length === this.tabData.length ? true : false;
      // console.log(this.showAllFlag);
    },
    // 详情页返回
    goBack(data) {
      this.detailsModal = data;
      // 重新获取站内信数据
      this.getReadStatus();
      this.$refs.crudTable.init();
    },
  },
};
</script>
<style lang="scss">
.letter-email {
  .header {
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0;
    margin-right: 10px;
  }
  .ivu-table {
    color: #333;
  }
  // .ivu-radio-group-button:focus {
  //   box-shadow: none !important;
  // }
  .ivu-radio-focus {
    // box-shadow: -1px 0 0 0 transparent !important;
  }
  .colorBlue {
    color: #0084ff;
  }
  .ivu-btn:focus {
    box-shadow: none;
  }
  .letter-btn-del,
  .letter-btn-read,
  .letter-btn-all {
    height: 32px;
    &:hover {
      background: #f7f7f7;
      border-color: #dcdee2;
    }
  }
  .letter-btn-all {
    color: #0084ff;
    //  &:focus {
    //   color: #0084ff;
    //   box-shadow: none;
    // }
  }
  .letter-bot-line:hover {
    text-decoration: underline !important;
  }
}
</style>
